<template>
  <div class="app-container">
    <el-form ref="form" :rules="rules" :model="form" label-width="120px" style="width: 400px">
      <el-form-item label="名称" prop="uid">
        <el-input v-model="form.uid"/>
      </el-form-item>
      <el-form-item label="演唱者" prop="pwd">
        <el-input type="password" v-model="form.pwd"/>
      </el-form-item>
      <el-form-item label="出版商" prop="checkPwd">
        <el-input type="password" v-model="form.checkPwd"/>
      </el-form-item>
      <el-form-item label="发行者" prop="nickname">
        <el-input v-model="form.nickname"/>
      </el-form-item>
      <el-form-item label="介质" prop="nickname">
        <el-input v-model="form.nickname"/>
      </el-form-item>
      <el-form-item label="类型" prop="usertype">
        <el-select v-model="form.usertype" placeholder="请选择">
          <el-option label="普通用户" value="0"/>
          <el-option label="管理员" value="1"/>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :loading="buttonLoading" @click="onSubmit">确认创建</el-button>
        <el-button @click="onCancel">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import {addUser} from '@/api/user'

  export default {
    data() {
      const validateCheckPwd = (rule, value, callback) => {
        if (!value) {
          callback(new Error('确认密码不能为空'))
        } else if (value !== this.form.pwd) {
          callback(new Error('密码两次输入不一致'))
        } else {
          callback()
        }
      };
      return {
        form: {
          uid: '',
          pwd: '',
          checkPwd: '',
          nickname: '',
          usertype: ''
        },
        rules: {
          uid: [{required: true, message: '此字段不能为空', trigger: 'blur'}]

        },

        buttonLoading: false
      }
    },
    methods: {
      onSubmit() {
        this.$message('添加成功');
        this.onCancel();
        return false;
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.buttonLoading = true;
            addUser(this.form).then(response => {
              console.log(response);
              this.buttonLoading = false;
            });
            this.$message('添加成功');
          } else {
            this.$message('填写信息有误，请重试');
            return false;
          }
        });
      },
      onCancel() {
        for (var key in this.form) {
          this.form[key] = '';
        }

      }
    }
  }
</script>

<style scoped>
  .line {
    text-align: center;
  }
</style>

